<!-- head start -->
<#include "common/head.html"/>
<!-- head end -->

<link rel="stylesheet" type="text/css" href="${domain}/static/css/event.css">
<title>创研动态</title>

<!--navbar start-->
<#include "common/navbar.html"/>
<!--navbar end -->

<!--page content start -->
<div class="page-event">
    <div class="banner">
        <img src="${domain}/static/images/banner_event.png" alt="">
    </div>
    <div class="event">
        <div class="event-title">
            <h2>创研大事记</h2>
            <p>一步一个脚印，与大家一起分享我们的成长故事</p>
        </div>
        <!--内容部分-->
        <div class="event-ct">
            <div class="event-ct01">
                <ul class="event-ct01-list">
                <#list cmsEvents?keys as key>
                    <li id="${key}">${key}</li>
                </#list>
                </ul>
            </div>

            <#list cmsEvents?keys as key>
            <div class="event-ct02 clearfix" id="content_${key}">
                <#assign cmsEvent=cmsEvents[key]/>
                <!--奇数-->
                <ul class="event-ct02-list01">
                <#list cmsEvent as cmsAd>
                    <#if cmsAd_index%2 == 0>
                    <li>
                        <span class="i-clock"></span>
                        <h2>${cmsAd.remark}</h2>
                        <p>${cmsAd.adName}</p>
                        <#if cmsAd.adImage != "">
                            <p><img src="${cmsAd.adImage}" alt="${cmsAd.adName}"></p>
                        </#if>
                    </li>
                    </#if>
                </#list>
                </ul>
                <!--偶数-->
                <ul class="event-ct02-list02">
                <#list cmsEvent as cmsAd>
                <#if cmsAd_index%2 != 0>
                    <li>
                    <span class="i-clock"></span>
                    <h2>${cmsAd.remark}</h2>
                    <p>${cmsAd.adName}</p>
                    <#if cmsAd.adImage != "">
                        <p><img src="${cmsAd.adImage}" alt="${cmsAd.adName}"></p>
                    </#if>
                    </li>
                </#if>
                </#list>
                </ul>
            </div>
            </#list>
        </div>
        <!--内容部分-->
    </div>
</div>
<script type="text/javascript">
    window.addEventListener('load', function(){

        var oBox = document.querySelector('.event-ct01');

        window.onscroll = function(){
            if(document.body.scrollTop < 556){
                oBox.className = "event-ct01";
            }else{
                oBox.className = "event-ct01 event-ct01-pof";
            }
        }

        document.getElementById("event").className="current";

        var eventLi = document.querySelectorAll(".event-ct01-list > li");
        var eventContent = document.querySelectorAll(".event-ct02");

        var previousYear = eventLi[0].getAttribute("id");
        var nextYear = eventLi[eventLi.length-1].getAttribute("id");

        //document.getElementById("content_" + (parseInt(nextYear)-1)).firstElementChild.className="active";

        for (var i = eventLi.length - 1; i >= 0; i--) {
            var id = eventLi[i].getAttribute("id");
            if(id != previousYear && id != nextYear ){
                eventLi[i].addEventListener("click",function(e){
                    var targetId = e.target.getAttribute("id");
                    var targetClass = e.target.getAttribute("class");
                    if(targetClass == null || targetClass != "active" ){
                        showEventLi(targetId);
                        showEventContent(targetId);
                    }
                })
            }
        }

        function showEventLi(id){
            for (var i = eventLi.length - 1; i >= 0; i--) {
                var targetId = eventLi[i].getAttribute("id");

                if(targetId != null && targetId == id){
                    eventLi[i].className="active";
                    eventLi[i].style.display="inline-block";
                }else if(targetId != null && (targetId == (parseInt(id)  + 1) || targetId == (parseInt(id) - 1))){
                    eventLi[i].className="";
                    eventLi[i].style.display="inline-block";
                    if(targetId == nextYear){
                        eventLi[i].className="event-ct01-disable"
                    }
                    if(targetId == previousYear){
                        eventLi[i].className="event-ct01-disable"
                    }
                }else{
                    eventLi[i].className="";
                    eventLi[i].style.display="none";
                }
            }
        }

        function showEventContent(id){
            for (var i = eventContent.length - 1; i >= 0; i--) {
                var targetId= eventContent[i].getAttribute("id");
                if(targetId != null && targetId == "content_" + id){
                    eventContent[i].style.display="block";
                }else{
                    eventContent[i].style.display="none";
                }
            }
        }

        showEventLi(parseInt(nextYear)-1);
        showEventContent(parseInt(nextYear)-1);
    })
</script>
<!--page content end -->


<!-- foot start -->
<#include "common/foot.html"/>
<!-- foot end -->